<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet"/>
	<link href="css/ui.jqgrid.css" rel="stylesheet"/>
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/i18n/grid.locale-kr.js"></script>
	<script src="js/jquery.jqGrid.min.js"></script>
	
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	
	<script type="text/javascript">
	  var lastsel;
	  var dataSet;
	  
	  
		$.datepicker.setDefaults({
		    dateFormat: 'yy-mm-dd'
		});
		
		$(function() {
		    $( "#bonusDate1" ).datepicker();
		  });
		  
		$(function() {
		    $( "#bonusDate2" ).datepicker();
		  });
		$(document).ready(function(){
			$('#grid').jqGrid({
			url:'BON1011M1.do'
		 	,mtype:'POST'
			,postData :  {'departmentCode':$('#departmentCode>option[selected=selected]').val()
						} 
			,pager:'#pager'
			,loadonce:false
			,datatype:'json'
			,caption:'직원조회'
			,height:'100%'
			,rowNum:10
			,rowList:[10,20,30]
			,colNames:['부서명','사원번호','성명','월기준금액']
			,colModel:[
			          {name:'departmentName', width:100,align:'center'},
			          {name:'employeeCode', width:100,align:'center'},
			          {name:'employeeName', width:100, align:'center'},
			          {name:'baseSalary', width:100, formatter:'currency', formatoptions:{thousandsSeparator:",", decimalPlaces: 0}, align:'right'}
			          ]
			 ,onSelectRow:function(id){ 
		        	 jQuery("#grid2").saveRow(lastsel);
	    		 }
			});
			
		});
		
		$(document).ready(function(){
			$('#grid2').jqGrid({
		/* 	 url:'BON1012M1.do'
		  	,mtype:'POST'
			,postData :	 {'departmentCode':$('#departmentCode>option[selected=selected]').val()
				,'bonusCode':$('#bonusCode>option[selected=selected]').val()
				,'bonusDate1':$('#bonusDate1').val()
				,'bonusDate2':$('#bonusDate2').val()
					} */
			pager:'#pager2'
			, loadonce:false
			, datatype:'json'
			, caption:'직원조회'
			, height:'100%'
			, rowNum:10
			, rowList:[10,20,30]
			, colNames:['사원번호','성명','지급일자','보너스종류','보너스금액','','','']
			, colModel:[
			          {name:'employeeCode', width:100,align:'center'},
			          {name:'employeeName', width:100,align:'center'},
			          {name:'bonusDate',width:100,editable:true,align:'center',
			              edittype: 'text',
			         	editrules:{required:true},
			              editoptions: {size: 12, maxlengh: 12,dataInit: function (element) {
			                      $(element).datepicker({dateFormat: 'yymmdd'});
			              			}
			                  }
		              },
			          {name:'bonusCode',width:100,editable:true,align:'center', edittype:'select', formatter:'select', editoptions:{value:{B1:'성과급',B2:'명절보너스',B3:'연말보너스'}},editrules:{required:true}},
			          {name:'bonusSalary', width:100,editable:true, formatter:'currency', formatoptions:{thousandsSeparator:",", decimalPlaces: 0}, align:'right',
			        	  edittype: 'text',editrules:{required:true} 
		        	  },
			          {name:'departmentCode',width:100,hidden:true},
			          {name:'bonusCode',width:100,hidden:true},
			          {name:'sign', width:100,hidden:true}
			          ]
	    	 ,onSelectRow:function(id){ 
	    		 if(id && id!==lastsel){
	    			 
		        	 jQuery("#grid2").saveRow(lastsel);
		        	 
		        	 jQuery(this).editRow(id, true); 
			         
		        	 lastsel=id;

    		 	 }
	    	 }
			
			});
			
		});
		$(document).ready(function(){
		 $.ajax({
				url : 'BON1012M1.do',
				type : 'POST',
				data:'json',
				data :  {'departmentCode':$('#departmentCode>option[selected=selected]').val()
					,'bonusCode':$('#bonusCode>option[selected=selected]').val()
					,'bonusDate1':$('#bonusDate1').val()
					,'bonusDate2':$('#bonusDate2').val()
						},
				success : function(data){
					
					var rows=data.rows;
					dataSet=new Array();
						$('#grid2').jqGrid('clearGridData');
						
						if(data.result){
							for(var i=0;i<rows.length;i++){
								jQuery("#grid2").addRowData(i,rows[i]);
								jQuery('#grid2').setRowData(i, {sign:'R'});
								
								dataSet[i]=rows[i];
							}
						}else{
							alert(data.msg);
						}
						
				}
			});
		});
			
		$(document).ready(function(){
			var rowid =10000;
			$( "#i1" ).click(function() {
				var row=  $( "#grid" ).getGridParam( "selrow" );
				var data=	$( "#grid" ).getRowData(row);
				rowid=rowid+1;			 	
					
				if(row!=null){
				 	var addrow = {employeeCode:data.employeeCode
			 					  ,employeeName:data.employeeName
			 					  ,bonusCode:$('#bonusCode>option[selected=selected]').val()
			 					  ,bonusSalary:data.baseSalary*0.1
			 					  ,sign:'I'} ;
			 		jQuery("#grid2").addRowData(rowid,addrow);
			 		row=null;
			 		data=null;
				 	jQuery("#grid").resetSelection();
			 	}
			});
		});
		
		$(document).ready(function(){
			$( "#i2" ).click(function() {
				var row =  $( "#grid2" ).getGridParam( "selrow" );
				var data = $( "#grid2" ).getRowData(row);
				
				if(data.sign==''||data.sign=='R'||data.sign=='D'||data.sign=='U'){
					jQuery('#grid2').setRowData(row, {sign:'D'});
					jQuery('#'+row,'#grid2').hide();
				} else {
			 		jQuery("#grid2").delRowData(row);
				}
			 	jQuery('#grid2').resetSelection();
			});
		});
		
	 	$(document).ready(function(){
			$( "#save1" ).click(function() {
				
				jQuery("#grid2").saveRow(lastsel);
				
				var dataList = jQuery("#grid2").jqGrid("getRowData");

				for(var i=0;i<dataSet.length;i++){
					if(dataSet[i].sign==null&&dataList[i].sign=='R'){
						if(dataList[i].employeeCode==dataSet[i].employeeCode 
								&&dataList[i].bonusCode==dataSet[i].bonusCode
								&&dataList[i].bonusDate==dataSet[i].bonusDate
								&&dataList[i].bonusSalary==dataSet[i].bonusSalary){
							dataList[i].sign='R';
						
						}else if(dataList[i].employeeCode==dataSet[i].employeeCode 
								&&(dataList[i].bonusCode!=dataSet[i].bonusCode
								||dataList[i].bonusDate!=dataSet[i].bonusDate
								||dataList[i].bonusSalary!=dataSet[i].bonusSalary)){
							dataList[i].sign='U';
						
						}
					}
				}
				$.ajax({
					url : 'BON1013M1.do',
					type : 'POST',
					dataType:'json',
					contentType: "application/json",
					data : JSON.stringify(dataList),
					success : function(data){
						lastsel='';
						jQuery('#grid2').resetSelection();
						alert(data.msg);
					//	jQuery('#grid2').trigger('reloadGrid');
					$.ajax({
						url : 'BON1012M1.do',
						type : 'POST',
						data:'json',
						data :  {'departmentCode':$('#departmentCode>option[selected=selected]').val()
							,'bonusCode':$('#bonusCode>option[selected=selected]').val()
							,'bonusDate1':$('#bonusDate1').val()
							,'bonusDate2':$('#bonusDate2').val()
								},
						success : function(data){
							
							var rows=data.rows;
							dataSet=new Array();
								$('#grid2').jqGrid('clearGridData');
								
								if(data.result){
									for(var i=0;i<rows.length;i++){
										jQuery("#grid2").addRowData(i,rows[i]);
										jQuery('#grid2').setRowData(i, {sign:'R'});
										
										dataSet[i]=rows[i];
									}
								}else{
									alert(data.msg);
								}
								
						}
					});
						
					}
				});
			});
		}); 
	 	
	

	</script>
	
<style>
.ui-datepicker{ font-size: 12px; width: 160px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>

</head>
<body>
	<form name="form01"  method="post" action="BON1010M1.do">
	<center>
		<table border="1" rules="none" cellspacing="0" cellpadding="5" width="90%">
			<tr>
				<td>부서명</td>
				<td>보너스종류</td>
				<td>보너스지급일자</td>
			</tr>
			<tr>
				<td>
					<select id="departmentCode" name="departmentCode">
						<option value=""></option>
						<c:set var="fl" value="${false}"></c:set>
						<c:if test="${model2.departmentCode=='all'}">
						<option value="all" selected="selected">전체</option>
						<c:set var="fl" value="${true}"></c:set>
						</c:if>
						<c:if test="${!fl }">						
						<option value="all" >전체</option>
						</c:if>
						<c:forEach var="b"  items="${model}">
							<c:if test="${b.codeType=='DEPARTMENT'}">
								<c:set var="fl" value="${false}"></c:set>
								<c:if test="${b.codeDetail==model2.departmentCode}">
									<option  value="${b.codeDetail}" selected="selected">${b.codeName }</option>
										<c:set var="fl" value="${true}"></c:set>
								</c:if>
									<c:if test="${!fl}">
									<option value="${b.codeDetail}" >${b.codeName }</option>
									</c:if>
							</c:if>
						</c:forEach>
					</select>
				</td>
			
				<td>
					<select id="bonusCode"  name="bonusCode">
						<option value=""></option>
						<c:set var="fl" value="${false}"></c:set>
						<c:if test="${model2.bonusCode=='all'}">
						<option value="all" selected="selected">전체</option>
						<c:set var="fl" value="${true}"></c:set>
						</c:if>
						<c:if test="${!fl }">						
						<option value="all" >전체</option>
						</c:if>
						<c:forEach var="b"  items="${model}">
							<c:if test="${b.codeType=='BONUS'}">
							<c:set var="fl" value="${false}"></c:set>
							<c:if test="${b.codeDetail==model2.bonusCode}">
									<option value="${b.codeDetail}" selected="selected">${b.codeName }</option>
										<c:set var="fl" value="${true}"></c:set>
							</c:if>
									<c:if test="${!fl}">
									<option value="${b.codeDetail}" >${b.codeName }</option>
									</c:if>
							</c:if>
						</c:forEach>
					</select>
				</td>
				<td>
					<input id="bonusDate1" name="bonusDate1" type=text value="${model2.bonusDate1}" readonly="readonly">
					<input id="bonusDate2" name="bonusDate2" type=text value="${model2.bonusDate2}" readonly="readonly">
					<input id="search1" type="submit" value="조회">
				</td>
			</tr>
		</table>
		</center>
	</form>
	<form name="form02"  method="post" >
		<center>
			<table rules="none" cellspacing="0" cellpadding="5" width="90%">
				<tr>
					<td align="left">
						<table id="grid"></table>
						<div id="pager"></div>
					</td>
					<td align="center" valign="middle">
						<input id="i1" type="button" value="대상>>"><br><br>
						<input id="i2"type="button" value="<<제외">
					</td>
					<td align="right" valign="top">
						<table id="grid2"></table>
						<div id="pager2"></div>
					</td>
				</tr>
			</table>
			<table width="90%">
				<tr>
					<td align="right"><input id="save1" type="button" value="저장" ></td>
				</tr>
			</table>
		</center>

	</form>
	
</body>
</html>